<template>
  <div id="items">
    <div class="item-box">
      <div class="title">
        <h2 class="fl">{{title}}</h2>
        <span class="more fr">
        </span>
      </div>
      <div class="list-box">
        <div class="box fl" v-for="value in items" :key="value.id" @click="$router.push({name:'Detail',query:{id:value.id}})">
          <div class="picture">
            <img :src="value.imgs.split(',')[0]" alt>
          </div>
          <div class="presentation">
            <p class="name">{{value.productName}}</p>
            <p class="information">{{value.information}}</p>
            <p class="price">
              <span>￥</span>
              <span class="num">{{value.shopPrice}}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "items",
  props:['items'],
  data() {
    return {
      title: "热销产品",
      more: "更多"
    };
  }
};
</script>

<style scoped>
#items {
  width: 100%;
  min-height: 40%;
  margin-bottom: 5%;
  /* background-color: yellowgreen; */
}
#items .item-box {
  width: 1080px;
  margin: 0 auto;
}
#items .item-box .title {
  height: 50px;
  margin-bottom: 2%;
  /* background-color: antiquewhite; */
}
#items .item-box .title h2 {
  color: #333;
  width: 95%;
  font-size: 28px;
  font-weight: 400;
}
#items .item-box .title .more {
  width: 5%;
  margin-top: 1.5%;
  color: #999;
}
#items .item-box .title .more a {
  color: #999;
}
#items .item-box .title .more:hover,
#items .item-box .title .more:hover a {
  color: #0076a4;
  cursor: pointer;
}
#items .item-box .list-box {
  height: 385px;
  /* background-color: aquamarine; */
}
.list-box .box {
  height: 385px;
  width: 266.25px;
  margin-right: 0.08%;
  margin-left: 0.08%;
  /* background-color: cadetblue; */
}
.box:hover {
  margin-top: -2px;
  box-shadow: 0 0 30px #ccc;
  cursor: pointer;
}
.list-box .box .picture {
  height: 266px;
  width: 100%;
  /* background-color: aliceblue; */
}
.list-box .box .picture img {
  height: 100%;
  width: 100%;
}
.list-box .box .presentation {
  height: 72px;
  width: 100%;
  padding-bottom: 7%;
  padding-top: 7%;
  /* background-color: coral; */
}
.list-box .box .presentation p {
  display: block;
  width: 100%;
  text-align: center;
}
.name {
  height: 23px;
  color: #333;
  line-height: 23px;
  font-size: 19px;
}
.information {
  color: #666;
  font-size: 14px;
  height: 18px;
  margin-top: 2%;
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
.price {
  margin-top: 11px;
  height: 26px;
  line-height: 26px;
  overflow: hidden;
  color: #a92112;
}
.price span {
  font-size: 15px;
}
.price .num {
  font-size: 22px;
}
</style>
